<div style="height: 100% ;padding:20px 20px  20px 8px;width: calc(100vw - 260px);" class="flex flex_column flex_1">
    <div class="ai_title">合同信息抽取</div>
    <div class="bg_white mgt20 flex_1 ai_box">
      <div class="flex align_center">
        <div class="add_project_btn btn_hand" (click)="showModal()">新建项目</div>
        <div class="add_project_msg">您还可以新建<span>{{ListLength}}</span>个项目</div>
      </div>
      <nz-table #basicTable [nzData]="listOfData" class="mgt15">
        <thead>
          <tr style="background-color: red;">
            <th style="background-color: #F2F5FC;">项目名称</th>
            <th style="background-color: #F2F5FC;" nzWidth="25%">描述</th>
            <th style="background-color: #F2F5FC;" [nzSortFn]="timeCompare" [nzSortOrder]="'descend'" [nzSortDirections]="['descend','ascend']" [nzSortPriority]="99">更新时间</th>
            <th style="background-color: #F2F5FC;">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of basicTable.data" class="editable-row">
            <td style="width: 290px;">
              <div class="editable-cell" [hidden]="editNameId === data.project_id" (click)="startNameEdit(data)">
                {{  data.project_name }}<img src="assets/images/icon_edit_h.png" alt="" class="edit_img hidden icon-show">
              </div>
              <div [hidden]="editNameId !== data.project_id" style="position: relative;">
                  <input type="text" nz-input (blur)="stopNameEdit(data.project_id)" [ngClass]="{'borderReds':EditName.length === 50}" [(ngModel)]="EditName" maxlength="50"/>  
                  <span *ngIf="EditName.length === 50" class="NameHint desHint">最大字符长度为50</span>
              </div>
            </td>
            <td>
              <div class="editable-cell">
                {{  data.description }}
              </div>
              <!--  (click)="startEdit(data)" -->
              <!--  [hidden]="editId === data.project_id" -->
              <!-- <img src="assets/images/icon_edit_h.png" alt="" class="edit_img hidden icon-show"> -->
              <!-- <div [hidden]="editId !== data.project_id" style="position: relative;">
                  <input type="text" nz-input (blur)="stopEdit(data.project_id,data.description)" [ngClass]="{'borderReds':EditDescription.length === 200}" [(ngModel)]="EditDescription" maxlength="200"/>  
                  <span *ngIf="EditDescription.length === 200" class="NameHint desHint">最大字符长度为200</span>
              </div> -->
            </td>
            <td>{{ data.update_time }}</td>
            <td>
              <a (click)="editItem(data)">配置</a>
              <nz-divider nzType="vertical"></nz-divider>
              <a (click)="export(data.project_id)">导出</a>
              <nz-divider nzType="vertical"></nz-divider>
              <a (click)="deleteData(data.project_id)">删除</a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
</div>
<!-- <button></button> -->
<nz-modal [(nzVisible)]="isVisible" [nzWidth]='400' nzTitle="新建项目" [nzFooter]=null nzCentered (nzOnCancel)="handleCancel()">
    <ng-container *nzModalContent>
        <div>
            <div class="pro_model_box flex flex_column">
                <div class="pro_model_item flex" style="position: relative;">
                    <div>项目名称</div>
                      <input nz-input placeholder="请输入项目名称" [ngClass]="{'borderReds':addListData.project_name.length === 50}" [(ngModel)]="addListData.project_name" maxlength="50"/>
                      <span *ngIf="addListData.project_name.length === 50" class="NameHint">最大字符长度为50</span>           
                </div>
                <div class="pro_model_item flex">
                    <div>描述</div>
                    <div class="flex flex_column" style="align-items: flex-end; width: auto;">
                        <textarea rows="4" nz-input [(ngModel)]="addListData.description" maxlength="200"></textarea>
                        <div class="pro_model_msg">{{addListData.description.length}}/200</div>
                    </div>
                </div>
            </div>
            <div class="flex justify_center">
                <button style="margin-right: 4px;" nz-button nzType="primary" nzDanger (click)="addList()">确定</button>
                <button nz-button nzType="default" (click)="handleCancel()">取消</button>
            </div>
        </div>
    </ng-container>
</nz-modal>
<!-- 删除的模态框 -->
<nz-modal [(nzVisible)]="deleteShow" nzTitle="删除" [nzWidth]='400' [nzFooter]=null nzCentered (nzOnCancel)="deleteshut()">
    <ng-container *nzModalContent>
        <p>确定删除吗？</p>
        <div style="display: flex; justify-content: flex-end;">
            <button style="margin-right: 4px;" nz-button nzType="primary" nzDanger (click)="deleteOk()">确定</button>
            <button nz-button nzType="default" (click)="deleteshut()">取消</button>
        </div>
    </ng-container>
</nz-modal>